<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/layui.css">
    <style>
            pre { 
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: normal ;
        }
    </style>
</head>
<body>
    <input type="checkbox" name="ch" checked="checked" id="aa" abc="aabbcc"/> aa
    <input type="checkbox" name="ch" id="bb"/> bb

    <div class="layui-card">
       <div class="layui-card-header">操作元素的属性</div>
       <div class="layui-card-body">
        <pre><code>
            属性的分类：

            固有属性：元素本身就有的属性id、name、class、style
            返回值是boolean的属性：checked、selected、disabled
            自定义属性：用户自己定义的属性
        区别
            1.如果是固有属性，attr()和prop()方法均可获取
            2,如果是自定义属性，attr()可获取，prop()不可获取
            3,如果是返回值是boolean类型的属性
                若设置了属性，attr()返回具体的值，prop()返回true

        1.获取属性
        attr("属性名")
        prop(“属性名")
        2.设置属性
        attr("属性名",属性)
        prop(“属性名",属性)
        3,移除属性
        removeAttr('属性名')
</pre>
        </code>
            
    
               
      </div>

</body>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
           var name =$('#aa').attr('name')//获取属性
           var ck1 =  $('#aa').prop('checked')// 用prop获取Boolean类型返回true或false
           $('#bb').attr('checked',true);//用attr设置属性
            // $('#bb').prop('checked',false);
            $('#bb').removeAttr('checked')//删除属性
           console.log(name) 
    </script>
</html>